<template>
  <el-card class="clock-card" shadow="hover">
    <div class="flip-clock">
      <div v-for="(digit, index) in timeArray" :key="index" class="flip-digit">
        <span v-if="digit === ':'" class="colon">:</span>
        <div v-else class="digit-wrapper">
          <div class="digit" :class="{ flip: flippingIndex === index }">
            <div class="digit-top">{{ digit }}</div>
            <div class="digit-bottom">{{ digit }}</div>
            <div class="digit-flip-top">{{ digit }}</div>
            <div class="digit-flip-bottom">{{ digit }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";

const timeArray = ref([]);
const flippingIndex = ref(null);

function getTimeArray() {
  const now = new Date();
  const h = String(now.getHours()).padStart(2, "0");
  const m = String(now.getMinutes()).padStart(2, "0");
  const s = String(now.getSeconds()).padStart(2, "0");
  return [...h, ":", ...m, ":", ...s];
}

function updateClock() {
  const newTime = getTimeArray();
  newTime.forEach((val, i) => {
    if (timeArray.value[i] !== val && val !== ":") {
      flippingIndex.value = i;
      setTimeout(() => {
        timeArray.value[i] = val;
        flippingIndex.value = null;
      }, 600); // 翻牌动画时长
    }
  });
}

onMounted(() => {
  timeArray.value = getTimeArray();
  setInterval(updateClock, 1000);
});
</script>

<style scoped>
.clock-card {
  width: fit-content;
  margin: auto;
  padding: 20px;
  background: #1e1e1e;
  color: #fff;
}

.flip-clock {
  display: flex;
  align-items: center;
}

.flip-digit {
  display: flex;
  justify-content: center;
  align-items: center;
}

.colon {
  font-size: 48px;
  padding: 0 10px;
  color: #ccc;
}

.digit-wrapper {
  perspective: 1000px;
}

.digit {
  position: relative;
  width: 50px;
  height: 70px;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  font-size: 48px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.digit-top,
.digit-bottom,
.digit-flip-top,
.digit-flip-bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  line-height: 35px;
  backface-visibility: hidden;
}

.digit-top {
  top: 0;
  background: linear-gradient(#444, #222);
}

.digit-bottom {
  bottom: 0;
  background: linear-gradient(#222, #000);
}

.digit-flip-top {
  top: 0;
  transform-origin: bottom;
  transform: rotateX(0deg);
  background: linear-gradient(#444, #222);
}

.digit-flip-bottom {
  bottom: 0;
  transform-origin: top;
  transform: rotateX(90deg);
  background: linear-gradient(#222, #000);
}

.flip .digit-flip-top {
  animation: flipTop 0.3s ease-in forwards;
}

.flip .digit-flip-bottom {
  animation: flipBottom 0.3s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes flipTop {
  0% {
    transform: rotateX(0deg);
  }

  100% {
    transform: rotateX(-90deg);
  }
}

@keyframes flipBottom {
  0% {
    transform: rotateX(90deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}
</style>
